<template>
  <div>
    <!-- 冻结弹框规则 -->
    <el-dialog title="线下充值密码" :visible.sync="dialogVisible" width="750px" center :close-on-click-modal="false" @close="close">
      <div v-loading="loading" class="dialog-recharge-psw">
        <!-- step -->
        <div class="step">
          <el-steps :active="step" finish-status="success">
            <el-step title="验证身份" />
            <el-step title="设置密码" />
            <el-step title="完成" />
          </el-steps>
        </div>

        <!-- step0 -->
        <div v-show="step===0" class="content step-0">
          <el-form
            ref="superForm"
            :model="superForm"
            status-icon
            :rules="rules"
            label-width="180px"
          >
            <el-form-item prop="superPassword">
              <el-input v-model="superForm.superPassword" placeholder="请输入超级管理员登录密码进入配置" />
            </el-form-item>
          </el-form>
        </div>

        <!-- step1 -->
        <div v-show="step===1" ref="shopBox" class="content step-1">
          <!-- 全部门店统一密码 -->
          <el-form
            v-show="typeRadio===0"
            ref="onlyForm"
            :model="onlyForm"
            status-icon
            :rules="rules"
            label-width="300px"
            class="form"
          >
            <el-form-item label="密码类型：">
              <div>
                <el-radio v-model="typeRadio" :label="0">全部门店统一密码</el-radio>
              </div>
              <!-- <div>
                <el-radio v-model="typeRadio" :label="1">不同门店不同密码</el-radio>
              </div>-->
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input type="password" style="display:none" />
              <el-input v-model.number="onlyForm.password" :maxlength="6" placeholder="请输入6位数字密码" />
            </el-form-item>
          </el-form>
        </div>

        <!-- step2 -->
        <div v-show="step===3" class="content step-2">
          <i class="el-icon-success app-text-color-success" />
          <div class="success-title">操作成功</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">{{ this.step===3?"关 闭":"下一步" }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { validateNumPw } from '@/utils/validate.js'
import { getShopList } from '@/api/shop'
import { setRechargePswOnly } from '@/api/vip'
import { checkSuperPwd } from '@/api/login'
export default {
  props: {
    form: {
      type: Object,
      require: true
    }
  },
  data() {
    /**
       * 表单校验方法相关
       */
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!validateNumPw(value)) {
        callback(new Error('长度为6位数字'))
      } else {
        callback()
      }
    }
    return {
      /**
         * 表单校验字段相关
         */
      rules: {
        password: [
          {
            min: 6,
            required: true,
            type: 'number',
            validator: validatePass,
            trigger: ['blur', 'change']
          }
        ],
        superPassword: [
          {
            required: true,
            message: '请输入超级管理员登录密码',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      step: 0,
      loading: false,
      dialogVisible: false,
      scrollFlag: true, // 是否允许滚动加载更多
      // 数据
      typeRadio: 0,
      superForm: {
        superPassword: ''
      },
      onlyForm: {
        password: ''
      },
      allForm: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    open() {
      this.show()
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.dialogVisible = false
    },

    close() {
      this.$refs.superForm.resetFields()
      this.$refs.onlyForm.resetFields()
      this.step = 0
      this.typeRadio = 0
    },

    handleSubmit() {
      switch (this.step) {
        // 第一步
        case 0:
          // 调用接口检查管理员密码
          this.$refs.superForm.validate(valid => {
            if (valid) {
              this.loading = true
              checkSuperPwd(this.superForm.superPassword)
                .then(res => {
                  this.loading = false
                  // 成功
                  if (res.data) {
                    this.step = 1
                  } else {
                    this.$message.error('密码有误，验证失败')
                  }
                })
                .catch(err => {
                  this.loading = false
                })
            }
          })

          break

          // 第二步
        case 1:
          // 统一密码
          if (this.typeRadio === 0) {
            this.$refs.onlyForm.validate(valid => {
              if (valid) {
                this.loading = true
                const md5Password = this.$md5(String(this.onlyForm.password))
                setRechargePswOnly(md5Password)
                  .then(res => {
                    this.step = 3
                    this.loading = false
                  })
                  .catch(err => {
                    this.loading = false
                  })
              }
            })
          }
          break

          // 第三步
        case 3:
          this.hide()
          break
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dialog-recharge-psw {
    // 步骤条
    .step {
      margin-bottom: 10px;
    }
    // 内容区
    .content {
      overflow: auto;
      height: 400px;
      .form {
        margin-top: 100px;
        .el-input {
          width: 200px;
        }
      }
    }

    // 第一步
    .step-0 {
      .el-input {
        width: 300px;
      }
      // text-align: center;
      .el-input {
        margin-top: 150px;
      }
    }

    // 第三步
    .step-2 {
      text-align: center;
      .el-icon-success {
        margin-top: 100px;
        font-size: 80px;
      }
      .success-title {
        margin-top: 20px;
        font-size: 20px;
      }
    }
  }
</style>
